<!DOCTYPE html>
<html>
    <head>
        <title>WebGL first rendering</title>
        <meta charset='utf-8'/>
        <script type='text/javascript' src='script.js'></script>
        <style type='text/css'>
            body {
                background: linear-gradient(to right, #667db6, #0082c8, #0082c8, #667db6);
            }
            .content {
                width: 960px;
                margin-left: auto;
                margin-right: auto;        
                background: #eee;
                padding: 1em;
            }
            canvas {
                display: block;
                margin-left: auto; margin-right: auto;
            }
        </style>
    </head>
    <body onload='main()'>
        <div class='content'>
        	<h1>WebGL first rendering</h1>
        	<p>
        	We draw 2 triangles to fill the viewport. They are colored by their coordinates value (RED for the horizontal axis, and GREEN for the vertical axis).
        	</p>
            <canvas id='myWebGLCanvas' height='512' width='512'></canvas>
        </div>
    </body>
</html>

